<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0">
                        <template>
                            <div class="text-muted text-center mb-3">
                                <small>您好</small>
                            </div>
                        </template>
                        <template>
                            <div class="text-center text-muted mb-4">
                                <small>如果要报修与投诉，请填写以下信息</small>
                            </div>
                            <form role="form">
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <p>
                                            订单房源：
                                        </p>
                                    </div>
                                    <div class="col-md-9">
                                        <p class="text-center">
                                            {{houseName}}
                                        </p>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <p>
                                            入住期间：
                                        </p>
                                    </div>
                                    <div class="col-md-9">
                                        <p class="text-center">
                                            {{beginTime}} - {{endTime}}
                                        </p>
                                    </div>
                                </div>
                                <base-input v-model="ruleForm.userQuestion"
                                            :error="questionError"
                                            @change="questionError=''"
                                            alternative
                                            type="text"
                                            placeholder="您的问题"
                                            addon-left-icon="fa fa-question"></base-input>
                                <textarea v-model="ruleForm.userQuestionDescription" class="form-control form-control-alternative mb-3" rows="3" placeholder="请描述您的问题(不超过500字)"></textarea>
                                <div class="row">
                                    <div class="col-md-9"></div>
                                    <div v-if="ruleForm.userQuestionDescription" class="col-md-3">
                                        <small :class="ruleForm.userQuestionDescription.length > 500? 'text-center text-danger': 'text-center text-success'" >当前字数:{{ruleForm.userQuestionDescription.length}} </small>
                                        <i v-if="ruleForm.userQuestionDescription.length > 500" class="fa fa-times"></i>
                                        <i v-else class="fa fa-check"></i>
                                    </div>
                                </div>
                                <b-form-file
                                multiple
                                accept="image/*"
                                v-model="ruleForm.file"
                                :state="ruleForm.file.length <= 10"
                                placeholder="如有需要传输的图像，拖动至此"
                                drop-placeholder="放下"
                                class="mb-3 mt-3"
                                browse-text="浏览"
                                ></b-form-file>
                                <div class="text-center">
                                    <base-button @click="submitFeedback" type="primary" class="my-4">{{submitText}}</base-button>
                                </div>
                            </form>
                        </template>
                        <base-alert v-if="showError" type="danger">
                            {{errorMsg}}
                        </base-alert>
                        <base-alert v-if="showSuccess" type="success">
                            工单提交成功！
                        </base-alert>
                    </card>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import {checkCookie, submitFeedback, mulitUpload, getOrder, getHomeInfo} from "../api";

export default {
    data() {
      return {
          file:[],
          ruleForm :{
              userQuestion: '',
              userQuestionDescription: '',
              file: [],
              photo: []
          },
          id: 0,
          questionError: '',
          showError: false,
          errorMsg: '',
          showSuccess: false,
          submitText: '提交',
          houseName: '房源名称',
          beginTime: '',
          endTime: ''
      }
    },
    methods:{
        goPage(page) {
            if (page === -1){
                this.$router.go(-1);
            } else {
                this.$router.push({name:page});
            }
        },
        message(msg){
            this.showError = true;
            this.errorMsg = msg;
        },
        submitFeedback(){
            this.showError = false;
            this.submitText = '提交中……';
            if (!this.ruleForm.userQuestion) {
                this.questionError = '请填写您的问题';
                this.submitText = '提交';
                return false;
            }
            if (this.ruleForm.userQuestionDescription && this.ruleForm.userQuestionDescription.length > 500){
                this.message("请正确填写问题描述");
                this.submitText = '提交';
                return false;
            }
            if (this.ruleForm.file.length > 10)
            {
                this.message('上传图片张数不能大于10张');
                this.submitText = '提交';
                return false;
            } else {
                new Promise(resolve => {
                    if (this.ruleForm.file.length === 0){
                        resolve();
                    } else {
                        let formData = new FormData();
                        this.ruleForm.file.forEach(f => {
                            formData.append("files", f);
                        });
                        mulitUpload(formData).then(res=>{
                            if (res.code === "1")
                            {
                                this.ruleForm.photo = res.data;
                                resolve();
                            } else {
                                this.message(res.msg);
                                this.submitText = '提交';
                                return false;
                            }
                        })
                    }
                })
                .then(() => {
                    submitFeedback({
                        aid: this.id.toString(),
                        title: this.ruleForm.userQuestion,
                        text: this.ruleForm.userQuestionDescription,
                        photos: this.ruleForm.photo
                    })
                        .then(res => {
                            if (res.code === "1"){
                                this.showSuccess = true;
                                this.submitText = '提交';
                                setTimeout(() => {this.goPage(-1)}, 3000);
                            } else {
                                this.message(res.msg);
                                this.submitText = '提交';
                                return false;
                            }
                        })
                        .catch( error=>{
                            this.message(error);
                            this.submitText = '提交';
                            return false;
                        })
                })
                .catch( error=>{
                    this.message(error);
                    this.submitText = '提交';
                    return false;
                });
            }
        }
    },
    created(){
        new Promise(resolve => {
            checkCookie();
            this.id = this.$route.params.id? this.$route.params.id : 0;
            if (this.id <= 0){
                this.message("无法获取订单，请返回订单页重新提交");
                setTimeout(() => {this.goPage(-1)}, 3000);
            } else {
                getOrder(this.id)
                .then(res => {
                    if (res.code === "1"){
                        this.beginTime = res.data.beginTime.substring(0,10);
                        this.endTime = res.data.endTime.substring(0,10);
                        getHomeInfo(res.data.hid)
                        .then(cres =>{
                            if (cres.code === "1"){
                                this.houseName = cres.data.title;
                            }
                        })
                        .catch( error=>{
                            this.message(error);
                            setTimeout(() => {this.goPage(-1)}, 3000);
                        });
                    }
                })
                .catch( error=>{
                    this.message(error);
                    setTimeout(() => {this.goPage(-1)}, 3000);
                });
                resolve();
            }
        })
    },
};
</script>
<style>
.contentDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
  border-right: aliceblue;
  border: 1px;
}
</style>
